<template>
  <view class="pages">
    <Tabs :tabs="tabs" @myEven="handleTabsItemChange">
      <view class="fb_main">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
          <text>功能建议</text>
          <text>购买遇到问题</text>
          <text>性能问题</text>
          <text>其他</text>
        </view>
        <view class="fb_content">
          <textarea @input="handleTextInput" placeholder="请描述一下你的问题"></textarea>
          <view class="fb_tool"><button @click="handleChooseImg">+</button>
            <view class="up_img_item" v-for=" (item,index) in chooseImgs" :key="" @click="handleRemoveImg(index)">
              <Upimg :src="item"></Upimg>
            </view>
          </view>

        </view>
        <view class="from_btn_wrap">
          <button @click="handleFormSubmit" type="warn">
            <icon type="success_no_circle" size="23" color="#fff" />
            提交
          </button>
        </view>
      </view>
    </Tabs>
  </view>
</template>

<script>
import Tabs from "../../components/Tabs/Tabs.vue";
import Upimg from "../../components/Uplmg/Uplmg.vue";
export default {
  components: {
    Tabs,
    Upimg,
  },
  data() {
    return {
      tabs: [
        {
          id: 0,
          value: "体验问题",
          isActive: true,
        },
        {
          id: 1,
          value: "商品、商家投诉",
          isActive: false,
        },
      ],
      chooseImgs: [],
      // 文本域的内容
      textVal: "",
      // 外网的图片的路径数组
      UpLoadImgs: [],
    };
  },
  methods: {
    handleRemoveImg(index) {
      // 2 获取被点击的组件的索引
      // const { index } = e.currentTarget.dataset;
      // 3 获取data中的图片数组
      console.log(index, "index");
      let chooseImgs = this.chooseImgs;
      // 4 删除元素
      chooseImgs.splice(index, 1);

      this.chooseImgs = chooseImgs;
    },
    // 点击 “+” 选择图片
    handleChooseImg() {
      // 2 调用小程序内置的选择图片api
      uni.chooseImage({
        // 同时选中的图片的数量
        count: 9,
        // 图片的格式  原图  压缩
        sizeType: ["original", "compressed"],
        // 图片的来源  相册  照相机
        sourceType: ["album", "camera"],
        success: (result) => {
          // 图片数组 进行拼接
          this.chooseImgs = [...this.chooseImgs, ...result.tempFilePaths];
        },
      });
    },
    // 文本域的输入的事件
    handleTextInput(e) {
      this.textVal = e.detail.value;
    },
    handleTabsItemChange(e) {
      // 1 获取被点击的标题索引
      const index = e;
      console.log(e, "index");
      // 2 修改源数组
      let tabs = this.tabs;
      tabs.forEach((v, i) => {
        return i === index ? (v.isActive = true) : (v.isActive = false);
      });
      // 3 赋值到data中
      this.tabs = tabs;
    },
    // 提交按钮的点击
    handleFormSubmit() {
      // 1 获取文本域的内容 图片数组

      const textVal = this.textVal;
      const chooseImgs = this.chooseImgs;
      // 2 合法性的验证
      if (!textVal.trim()) {
        // 不合法
        uni.showToast({
          title: "输入不能为空",
          icon: "none",
          mask: true,
        });
        return;
      }
      // 3 准备上传图片 到专门的图片服务器
      // 上传文件的 api 不支持 多个文件同时上传  遍历数组 挨个上传
      // 显示正在等待的图片
      uni.showLoading({
        title: "正在上传中",
        mask: true,
      });

      // 判断有没有需要上传的图片数组

      if (chooseImgs.length != 0) {
        // chooseImgs.forEach((v, i) => {
        //   // uni.uploadFile({
        //   //   // 图片要上传到哪里
        //   //   url: "https://images.ac.cn/Home/Index/UploadAction/",
        //   //   // 被上传的文件的路径
        //   //   filePath: v,
        //   //   // 上传的文件的名称 后台来获取文件  file
        //   //   name: "file",
        //   //   // 顺带的文本信息
        //   //   formData: {},
        //   //   success: (result) => {
        //   //     console.log(result);
        //   //     let url = JSON.parse(result.data).url;
        //   //     this.UpLoadImgs.push(url);

        //   //     // 所有的图片都上传完毕了才触发
        //   //     if (i === chooseImgs.length - 1) {
        //   //       uni.hideLoading();

        //   //       console.log("成功,把文本的内容和外网的图片数组 提交到后台中");
        //   //       //  提交都成功了
        //   //       // 重置页面

        //   //       this.textVal = "";
        //   //       this.chooseImgs = [];
        //   //       // 返回上一个页面
        //   //       uni.navigateBack({
        //   //         delta: 1,
        //   //       });
        //   //     }
        //   //   },
        //   // });
        // });
        setTimeout(() => {
          uni.showLoading({
            title: "上传成功",
            mask: true,
          });
        }, 1000);

        setTimeout(() => {
          this.textVal = "";
          this.chooseImgs = [];
          uni.hideLoading();
        }, 2000);

        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 2300);
      } else {
        uni.hideLoading();

        console.log("只是提交了文本");
        uni.navigateBack({
          delta: 1,
        });
      }
    },
  },
};
</script>

<style lang="less">
.pages {
  height: 100vh;
  background-color: #eee;

  .fb_main {
    padding: 20rpx;
    color: #666;
    .fb_title {
    }

    .fb_tips {
      display: flex;
      flex-wrap: wrap;
      text {
        width: 25%;
        padding: 10rpx;
        text-align: center;
        background-color: #fff;
        margin: 20rpx 12rpx;
      }
    }

    .fb_content {
      background-color: #fff;
      margin-top: 20rpx;
      textarea {
        padding: 10rpx;
      }

      .fb_tool {
        display: flex;
        flex-wrap: wrap;
        // 换行
        button {
          width: 90rpx;
          height: 90rpx;
          font-size: 60rpx;
          color: #ccc;
          padding: 0;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20rpx;
          margin-bottom: 10rpx;
          opacity: 0.8;
        }
      }
    }

    .from_btn_wrap {
      margin-top: 20rpx;
      display: flex;
      button {
        line-height: 70rpx;
        width: 80%;
      }
    }
  }
}
</style>
